<!-- 导入API模态框 -->
<!-- 确保主页面已加载以下库：
1. jQuery
2. Bootstrap JS
3. Toastr JS和CSS
-->
<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="importModalLabel">导入API</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="import-form">
                    <div class="mb-3">
                        <label for="import-type" class="form-label">导入类型</label>
                        <select class="form-select" id="import-type" name="type" required>
                            <option value="">请选择导入类型</option>
                            <option value="swagger">Swagger</option>
                            <option value="curl">cURL</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="import-content" class="form-label">导入内容</label>
                        <textarea class="form-control" id="import-content" name="content" rows="10" required></textarea>
                        <div class="form-text">
                            <span id="swagger-help" style="display: none;">
                                请粘贴Swagger JSON内容
                            </span>
                            <span id="curl-help" style="display: none;">
                                请粘贴cURL命令，例如：curl -X GET "https://api.example.com/users" -H "accept: application/json"
                            </span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" id="import-submit" class="btn btn-primary">导入</button>
            </div>
        </div>
    </div>
</div>

<script>
    // 等待DOM和依赖库加载完成
    function initImportModal() {
        // 配置toastr（如果可用）
        if (typeof toastr !== 'undefined') {
            toastr.options = {
                "closeButton": true,
                "progressBar": true,
                "positionClass": "toast-top-right"
            };
        }

        // 确保api_functions_part1.js已加载
        if (typeof updateRequestBodyVisibility === 'undefined') {
            console.error('api_functions_part1.js未正确加载');
        }

        // 切换导入类型时显示对应的帮助文本
        $('#import-type').change(function() {
            const type = $(this).val();
            
            $('#swagger-help, #curl-help').hide();
            
            if (type === 'swagger') {
                $('#swagger-help').show();
            } else if (type === 'curl') {
                $('#curl-help').show();
            }
        });

        // 处理导入按钮点击
        $('#import-submit').click(function() {
            const type = $('#import-type').val();
            const content = $('#import-content').val();
            
            if (!type || !content) {
                alert('请选择导入类型并输入内容');
                return;
            }
            
            $.ajax({
                url: '/api/import',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    type: type,
                    content: content
                }),
                success: function(response) {
                    if (response.success) {
                        $('#importModal').modal('hide');
                        loadApiList(); // 刷新API列表
                        showToast('success', response.message || '导入成功');
                    } else {
                        showToast('error', response.message || '导入失败');
                    }
                },
                error: function() {
                    showToast('error', '导入请求失败');
                }
            });
        });
    }

    // 确保在DOM和jQuery加载完成后初始化
    if (typeof $ !== 'undefined') {
        $(document).ready(initImportModal);
    } else {
        // 如果jQuery还未加载，等待一下
        setTimeout(function() {
            if (typeof $ !== 'undefined') {
                $(document).ready(initImportModal);
            } else {
                console.error('jQuery未加载，导入模态框功能不可用');
            }
        }, 1000);
    }
</script>